<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <!--<github-corner class="github-corner" />-->

    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                今日天气晴朗，气温在15℃至25℃之间，东南风。
              </p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic :value="99">
              <template #title>
                <div class="flex items-center">
                  <svg-icon icon-class="message" style="width: 20px; height: 20px;" />
                  <span class="text-[16px] ml-1">消息</span>
                </div>
              </template>
            </el-statistic>

            <el-statistic :value="50">
              <template #title>
                <div class="flex items-center">
                  <svg-icon icon-class="todolist" style="width: 20px; height: 20px;" />
                  <span class="text-[16px] ml-1">待办</span>
                </div>
              </template>
              <template #suffix>/100</template>
            </el-statistic>

            <el-statistic :value="10">
              <template #title>
                <div class="flex items-center">
                  <svg-icon icon-class="project" style="width: 20px; height: 20px;" />
                  <span class="text-[16px] ml-1">项目</span>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据卡片 -->
    <el-row :gutter="10" class="mt-3">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">访客数</span>
              <el-tag type="success">日</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(visitCountOutput) }}
            </div>
            <svg-icon icon-class="visit" style="width: 32px; height: 32px;" />
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span> 总访客数 </span>
            <span> {{ Math.round(visitCountOutput * 15) }} </span>
          </div>
        </el-card>
      </el-col>

      <!--消息数-->
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">IP数</span>
              <el-tag type="success">日</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(dauCountOutput) }}
            </div>
            <svg-icon icon-class="ip" style="width: 32px; height: 32px;" />
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span> 总IP数 </span>
            <span> {{ Math.round(dauCountOutput) }} </span>
          </div>
        </el-card>
      </el-col>

      <!--销售额-->
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">销售额</span>
              <el-tag>月</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(amountOutput) }}
            </div>
            <svg-icon icon-class="money" style="width: 32px; height: 32px;" />
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span> 总销售额 </span>
            <span> {{ Math.round(amountOutput * 15) }} </span>
          </div>
        </el-card>
      </el-col>

      <!--订单量-->
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">订单量</span>
              <el-tag type="danger">季</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(orderCountOutput) }}
            </div>
            <svg-icon icon-class="order" style="width: 32px; height: 32px;" />
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span> 总订单量 </span>
            <span> {{ Math.round(orderCountOutput * 15) }} </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
      <el-col :sm="24" :lg="8" class="mb-2">
        <BarChart
          id="barChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <PieChart
          id="pieChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <RadarChart
          id="radarChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  defineOptions({
    name: "Dashboard",
    inheritAttrs: false,
  });

  import { useUserStore } from "@/store/modules/user";
  import { useTransition, TransitionPresets } from "@vueuse/core";
  import { Edit  } from '@element-plus/icons-vue'

  const userStore = useUserStore();
  const date: Date = new Date();

  const greetings = computed(() => {
    const hours = date.getHours();
    if (hours >= 6 && hours < 8) {
      return "晨起披衣出草堂，轩窗已自喜微凉！";
    } else if (hours >= 8 && hours < 12) {
      return "上午好，" + userStore.nickname + "！";
    } else if (hours >= 12 && hours < 18) {
      return "下午好，" + userStore.nickname + "！";
    } else if (hours >= 18 && hours < 24) {
      return "晚上好，" + userStore.nickname + "！";
    } else if (hours >= 0 && hours < 6) {
      return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安！";
    }
  });

  const duration = 5000;

  // 销售额
  const amount = ref(0);
  const amountOutput = useTransition(amount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
  });
  amount.value = 2000;

  // 访客数
  const visitCount = ref(0);
  const visitCountOutput = useTransition(visitCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
  });
  visitCount.value = 2000;

  // IP数
  const dauCount = ref(0);
  const dauCountOutput = useTransition(dauCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
  });
  dauCount.value = 2000;

  // 订单量
  const orderCount = ref(0);
  const orderCountOutput = useTransition(orderCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
  });
  orderCount.value = 2000;
</script>

<style lang="scss" scoped>
  .dashboard-container {
    position: relative;
    padding: 24px;

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .github-corner {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      border: 0;
    }

    .data-box {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      font-weight: bold;
      color: var(--el-text-color-regular);
      background: var(--el-bg-color-overlay);
      border-color: var(--el-border-color);
      box-shadow: var(--el-box-shadow-dark);
    }

    .svg-icon {
      fill: currentcolor !important;
    }
  }
</style>
